import React, { useCallback, useEffect } from "react";
import { useRef } from "react";
import { useState } from "react";
import { FC } from "react";
import { useDispatch } from "react-redux";
import { UPDATE_PROCESS } from "../../../store/actions/process.action";
import "./progress.css";

interface IProps {
  totalSeconds: number;
  currentSecond: number;
}

const formatSeconds = (seconds: number): string => {
  const minate = Math.floor(seconds / 60);
  const second = Math.floor(seconds % 60);
  let res = minate + "";
  if (minate < 10) {
    res = "0" + minate;
  }
  if (second < 10) {
    res += ":0" + second;
  } else {
    res += ":" + second;
  }
  return res;
};

const Progress: FC<IProps> = ({ totalSeconds, currentSecond }) => {
  const [progressVal, setProgressVal] = useState<string>("0");
  const [beginPosition, setBeginPosition] = useState<number>(0);
  const allLineRef = useRef<HTMLDivElement | null>(null);
  const handleDragStart = useCallback((val: any) => {
    // console.log("handleDragStart--->", val.touches[0].pageX);
    setBeginPosition(val.touches[0].pageX);
  }, []);
  const handleDragMove = useCallback(
    (val: any) => {
      let position: number = 0;
      if (allLineRef.current) {
        position =
          ((val.touches[0].pageX - beginPosition) /
            allLineRef.current.clientWidth) *
          100;
        // 计算之前的歌曲进度 百分比
        position += (currentSecond / totalSeconds) * 100;
      }
      // console.log("handleDragMove--->", position);
      setProgressVal(position + "%");
    },
    [beginPosition, currentSecond, totalSeconds]
  );
  const dispatch = useDispatch();
  const handleDragEnd = (val: any) => {
    dispatch({
      type: UPDATE_PROCESS,
      payload: progressVal,
    });
  };
  const handleClickAllLine = useCallback(
    (val: any) => {
      let position: number = 0;
      if (allLineRef.current) {
        position =
          (val.nativeEvent.offsetX / allLineRef.current.clientWidth) * 100;
      }
      // console.log("handleClickAllLine--->", val, position);
      dispatch({
        type: UPDATE_PROCESS,
        payload: position + "%",
      });
    },
    [dispatch]
  );
  useEffect(() => {
    // console.log("totalSeconds, currentSecond--->", totalSeconds, currentSecond);
    setProgressVal((currentSecond / totalSeconds) * 100 + "%");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentSecond]);
  return (
    <div className="progress">
      <div className="progress-time current-time">
        {formatSeconds(currentSecond)}
      </div>
      <div className="progress-line">
        <div
          className="all-line"
          onTouchStart={handleDragStart}
          onClick={handleClickAllLine}
          ref={allLineRef}
        ></div>
        <div
          className="current-line"
          onTouchStart={handleDragStart}
          onClick={handleClickAllLine}
          style={{ width: progressVal }}
        ></div>
        <div
          // onMouseDown={handleDragStart}
          onTouchStart={handleDragStart}
          onTouchMove={handleDragMove}
          onTouchEnd={handleDragEnd}
          className="current-point"
          style={{ left: progressVal }}
        ></div>
      </div>
      <div className="progress-time left-time">
        {formatSeconds(totalSeconds)}
      </div>
    </div>
  );
};

export default Progress;
